<template>
  <div class="j-button">
    <button class="button" :class="{'j-button-danger': type === 'danger', 'j-button-primary': type === 'primary','j-button-default': type === 'default', 'j-button-isRadius': isRadius, 'j-disabled': disabled}" :disabled="disabled">
      <van-loading v-if="loading" size="22" color="#fff" />
      <span v-if="loading">{{loadingText}}</span>
      <slot v-else />
    </button>
  </div>
</template>
<script>
export default {
  name: 'JBotton',
  data() {
    return {
    };
  },
  props: {
    disabled: {
      type: Boolean
    },
    isRadius: {
      type: Boolean
    },
    loadingText: {
      type: ''
    },
    loading: {
      type: Boolean
    },
    type: {
      type: String,
      default: 'default'
    }
  },
  mounted() {

  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.j-button{
  position: relative;
  .button{
    // padding: .24px .3px .18px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 88px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 32px;
    line-height: 42px;
    text-align: center;
    border-radius: 10px;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    color:#fff;
    .van-loading{
      display: inline-block;
      margin-right: 10px;
    }
   &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: #000;
      border: inherit;
      border-color: #000;
      border-radius: inherit;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0;
      content: ' ';
    }
  }
  .j-button-isRadius{
    border-radius: 88px;
  }
  .j-button-danger{
    background-color:#E31D19;
  }
  .j-button-danger{
    background-color:#E31D19;
  }
  .j-button-primary{
    background-color: #07c160;
  }
   .j-button-default{
    background-color: #ddd;
  }
  .j-button-disabled {
      opacity: 0.5;
  }
  .j-disabled{
    position: relative;
    opacity: .5;
    cursor:no-drop
  }
}
</style>
